<script setup lang="ts">
import { useCounterStore } from '../stores/counter'

// 获取容器实例
const counter = useCounterStore()

// 修改状态
const handleIncrement = () => {
  counter.increment()
}

const handleAsyncIncrement = async () => {
  await counter.asyncIncrement()
}
</script>

<template>
  <div class="pinia-demo">
    <h2>Pinia 示例</h2>
    <div class="card">
      <p>Count: {{ counter.count }}</p>
      <p>Double Count: {{ counter.doubleCount }}</p>
      <p>Double Count Plus One: {{ counter.doubleCountPlusOne }}</p>
      <button @click="handleIncrement">同步增加</button>
      <button @click="handleAsyncIncrement">异步增加</button>
    </div>
  </div>
</template>

<style scoped>
.pinia-demo {
  text-align: center;
  margin: 20px;
}

.card {
  padding: 20px;
  border-radius: 8px;
  margin: 10px;
}

button {
  margin: 0 10px;
  padding: 8px 16px;
  border-radius: 4px;
  background-color: #646cff;
  color: white;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #747bff;
}
</style>